<template>
	<div class="pre-report abs full">
		<div class="rel full overflow-x-hidden">
			<product-header :detail="detail.INSURANCE" :simple="true" v-if="detail.INSURANCE && detail.INSURANCE.PRODUCT_ID"></product-header>
			<p class="title">评价模块</p>
			<div class="well feature">
				<div class="item">揭黑</div>
				<div class="item">亮点</div>
			</div>
			<p class="title">评价维度</p>
			<div class="well axis">
				<div class="item">疾病定义</div>
				<div class="item">保单责任</div>
				<div class="item">产品价格</div>
				<div class="item">服务方式</div>
				<div class="item">保单管理</div>
				<div class="item">保险公司</div>
			</div>
			<div class="center">
				<div class="desc">
					　　评价报告通过“揭黑”挖出条款中存在的各种坑，通过“亮点”展示给您更清楚的认识。是坑，我不踩，是金子就发光，快快生成报告去查看吧。
				</div>
				<button class="gen" @click="goToReport()">生成报告</button><br/>
				<a href="javascript:void(0);" class="back" @click="backToSearch()">换个条款看看</a>
			</div>
		</div>
	</div>
</template>

<script>
import ProductHeader from '@/components/product-header/product-header'
export default {
	name: 'pre-report',
	components: {
		ProductHeader
	},
	data() {
		return {
			detail:{}, //保险条款的各项属性,例如保险名称,得分,最大最小投保年龄等等
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.preReport = this;
	},
	activated() {
		document.title = '生成报告';
		this.getEvaluation();
	},
	deactivated() {
		this.detail={};
	},
	methods: {
		goToReport: function(){
			let id=this.$route.query.id;
			if(!id){
				return;
			}
			this.$router.push('/report?id='+id);
		},
		backToSearch: function(){
			this.$router.go(-1);
		},
		// 调接口获取指定id的综合评价
		getEvaluation(){
			let that=this;
			let id=this.$route.query.id;
			if(!id){
				this.showToast('出错了(保险id为空)','warning');
				return;
			}
			let ifCached=this.ifCached(id);
			if(ifCached){
				that.detail=ifCached;
				console.log('综合评价详情↓');
				console.log(this.detail);
			} else {
				// 判断是否有customerId
				let customerId=this.$util.getCustomerId();
				if(!customerId){
					return;
				}
				this.$util.ajax('/evaluation/comprehensiveEvaluation','post',{
					customerId: customerId,
					insuranceId: id
				}).then(function(res){
					if(res.code=='100000'){
						that.$set(that,'detail',res.data);
						let detail=that.$store.detail;
						detail.unshift(res.data);
						detail=detail.slice(0,5);
						console.log('综合评价详情↓');
						console.log(that.detail);
					}
				});
			}
		},
		// 获取url参数中的保险ID,先去$store中查询是否有缓存
		ifCached(id){
			let detail=this.$store.detail;
			if(detail.length==0){
				return false;
			}
			for(let i=0; i<detail.length; i++){
				if(detail[i].INSURANCE.PRODUCT_ID==id){
					return detail[i];
					break;
				}
			}
		},
	}
}
</script>

<style scoped>
.pre-report {
	font-size: 0.2rem;
	background: url(../detail/image/star_bg.png);
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
p.title {
	padding-left: 0.7rem;
	font-size: 0.3rem;
	color: #75a3e1;
	margin: 0.35rem 0 0.2rem 0;
}
.well {
	background: rgba(40,86,178,0.2);
}
.feature {
	height: 1.38rem;
}
.axis {
	height: 2.4rem;
}
.item {
	display: inline-block;
	margin: 0.45rem 0 0 0.64rem;
	width: 1.60rem;
	height: 0.52rem;
	font-size: 0.28rem;
	line-height: 0.52rem;
	color: #051737;
	background: #7d9ee7;
	border-radius: 0.08rem;
	text-align: center;
}
.desc {
	font-size: 0.24rem;
	color: #75a3e1;
	line-height: 0.48rem;
	padding: 0.3rem 0.4rem 0.2rem;
	text-align: left;
}
button.gen {
	display: inline-block;
	width: 3.6rem;
	height: 0.9rem;
	line-height: 0.9rem;
	font-size: 0.3rem;
	background: #185bb6;
	color: #f7f6f0;
	border: none;
	outline: none;
	border-radius: 0.1rem;
	text-align: center;
	margin-bottom: 0.5rem;
}
a.back {
	font-size: 0.24rem;
	color: #ffe373;
	text-decoration: underline;
}
</style>
